<template>
  <div class="mobile-retail-statistic">
    <page-wrapper content-full-height fixed-height>
      <!-- 搜索条件 -->
      <j-border class="search-border">
        <j-form layout="vertical">
          <j-form-item label="仓库" :span="24" :contentNest="false">
            <mobile-store-center-selector
              v-model:value="searchFormData.scId"
              show-search
              placeholder="请选择仓库"
              :filter-option="(input, option) =>
                (option?.children ?? '').toLowerCase().includes(input.toLowerCase())"
            />
          </j-form-item>
          
            <j-form-item label="开始时间" :span="24" :contentNest="false">
              <a-date-picker
                v-model:value="searchFormData.createStartTime"
                value-format="YYYY-MM-DD"
                placeholder="选择开始日期"
              />
            </j-form-item>
            <j-form-item label="结束时间" :span="24" :contentNest="false">
              <a-date-picker
                v-model:value="searchFormData.createEndTime"
                value-format="YYYY-MM-DD"
                placeholder="选择结束日期"
                :disabled-date="(current) => {
                  if (searchFormData.createStartTime) {
                    const startDate = new Date(searchFormData.createStartTime);
                    return current && current < startDate;
                  }
                  return false;
                }"
              />
            </j-form-item>
            
            <j-form-item label="商品编号" :span="24" :contentNest="false">
              <a-input
                v-model:value="searchFormData.productCode"
                placeholder="请输入商品编号"
              />
            </j-form-item>
            
            <j-form-item label="品牌名称" :span="24" :contentNest="false">
              <a-input
                v-model:value="searchFormData.brandName"
                placeholder="请输入品牌名称"
              />
            </j-form-item>
        </j-form>
        
        <div class="search-buttons">
          <a-button @click="resetSearch" class="reset-btn">重置</a-button>
          <a-button type="primary" @click="search" class="search-btn">查询</a-button>
        </div>
      </j-border>
      
      <!-- 汇总信息 -->
      <j-border title="汇总" class="total-border">
        <div class="total-info">
          <div class="total-item">
            <span>总数量:</span>
            <span class="total-value">{{ totalInfo.totalOrderNum || 0 }}</span>
          </div>
          <div class="total-item">
            <span>总金额:</span>
            <span class="total-value">{{ (totalInfo.totalAmount || 0).toFixed(2) }}</span>
          </div>
        </div>
      </j-border>
      <!-- 数据列表 -->
      <vxe-grid
        id="MobileRetailStatistic"
        ref="grid"
        resizable
        show-overflow
        highlight-hover-row
        keep-source
        row-id="productCode"
        :columns="tableColumn"
        :data="tableData"
        :loading="loading"
        height="calc(100vh - 300px)"
      >
        
      </vxe-grid>
      
      <!-- 分页 -->
      <div class="pagination">
        <a-pagination
          v-model:current="currentPage"
          v-model:pageSize="pageSize"
          :total="totalCount"
          :pageSizeOptions="['10', '20', '50']"
          @change="handlePageChange"
          @showSizeChange="handleSizeChange"
          size="small"
        />
      </div>

    </page-wrapper>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, reactive, ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import * as api from '@/api/sc/retail/out';
import { multiplePageMix } from '@/mixins/multiplePageMix';
import type { RetailOutDetailExtra } from '@/api/sc/retail/out/model/queryRetailOutSheetDetailBo';

export default defineComponent({
  name: 'MobileRetailStatistic',
  mixins: [multiplePageMix],
  setup() {
    const loading = ref(false);
    const totalInfo = reactive<RetailOutDetailExtra>({});
    const tableData = ref<any[]>([]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalCount = ref(0);
    
    return {
      h,
      SearchOutlined,
      loading,
      totalInfo,
      tableData,
      currentPage,
      pageSize,
      totalCount
    };
  },
  data() {
    return {
      searchFormData: {
        scId: '',
        createStartTime: '',
        createEndTime: '',
        productCode: '',
        brandName: ''
      },
      // 简化的表格列配置
      tableColumn: [
        { field: 'productCode', title: '商品编号', width: 120 },
        { field: 'productName', title: '商品名称', width: 200 },
        { field: 'orderNum', title: '销售数量', width: 80, align: 'right' },
        { 
          field: 'totalAmount', 
          title: '销售金额', 
          width: 100, 
          align: 'right',
          formatter: ({ cellValue }) => (cellValue || 0).toFixed(2)
        }
      ],

    };
  },
  methods: {
    
    // 搜索
    search() {
      this.loading = true;
      const params = this.buildQueryParams();
      api.queryRetailOutSheetDetail(params)
        .then((res) => {
          this.tableData = res?.datas || [];
          this.totalCount = res?.totalCount || 0;
          // 获取汇总数据
          if (res && res.extra) {
            this.totalInfo.totalAmount = res.extra.totalAmount;
            this.totalInfo.totalOrderNum = res.extra.totalOrderNum;
          }else{
            this.totalInfo.totalAmount = 0;
            this.totalInfo.totalOrderNum = 0;
          }
        })
        .catch(error => {
          console.error('加载数据时出错:', error);
          this.tableData = [];
          this.totalCount = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 加载数据
    loadData() {
      this.search();
    },
    

    
    // 组件挂载后加载数据
    mounted() {
      this.loadData();
    },
    
    // 重置搜索
    resetSearch() {
      this.searchFormData = {
        scId: '',
        createStartTime: '',
        createEndTime: '',
        productCode: '',
        brandName: ''
      };
      this.currentPage = 1;
      // 重置后重新搜索
      this.search();
    },
    
    // 构建查询参数
    buildQueryParams() {
      // 处理时间格式：将日期转换为包含时分秒的格式
      const formatDateWithTime = (dateStr) => {
        if (!dateStr) return '';
        return dateStr + ' 00:00:00';
      };
      
      const formatEndDateWithTime = (dateStr) => {
        if (!dateStr) return '';
        return dateStr + ' 23:59:59';
      };
      
      return {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        scId: this.searchFormData.scId,
        createStartTime: formatDateWithTime(this.searchFormData.createStartTime),
        createEndTime: formatEndDateWithTime(this.searchFormData.createEndTime),
        productCode: this.searchFormData.productCode,
        brandName: this.searchFormData.brandName
      };
    },
    
    // 分页变化
    handlePageChange(page: number) {
      this.currentPage = page;
      this.search();
    },
    
    // 每页条数变化
    handleSizeChange(current: number, size: number) {
      this.pageSize = size;
      this.currentPage = current;
      this.search();
    }
  }
});
</script>

<style scoped lang="less">
.mobile-retail-statistic {
  padding: 12px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  
  // 搜索区域样式
  .search-border {
    margin-bottom: 5px;
    padding: 16px;
    background: #fff;
    
    .date-range {
      display: flex;
      gap: 12px;
    }
    
    .search-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      
      .reset-btn,
      .search-btn {
        width: 48%;
      }
    }
  }
  
  // 表格样式调整
  :deep(.vxe-table) {
    margin-bottom: 16px;
    
    .vxe-table--row {
      background: #fff;
    }
  }
  
  // 分页样式
  .pagination {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 15px 0;
    position: relative;
    z-index: 10;
  }
  
  // 汇总信息样式
  .total-border {
    padding: 10px;
    background: #fff;
    
    .total-info {
      display: flex;
      justify-content: space-around;
      
      .total-item {
        text-align: center;
        font-size: 16px;
        
        .total-value {
          font-weight: 600;
          color: #1890ff;
          margin-left: 8px;
        }
      }
    }
  }
  
  // 适配小屏幕设备
  @media (max-width: 375px) {
    .search-border {
      .date-range {
        flex-direction: column;
        gap: 8px;
      }
    }
    
    .total-info {
      .total-item {
        font-size: 14px;
      }
    }
  }
}
</style>